 <template>
  <div class="header">
    <div class="header_back iconfont" @click.stop="handleBackClick">&#xe601;</div>
    <div class="header_title">
      {{ titleName }}
    </div>
    <div class="header_add" @click.stop="handleFuncClick">
      {{ functionName }}
    </div>
  </div>
</template>
  <script>
  import { defineComponent } from '@vue/composition-api'
export default defineComponent({
  props: ["titleName", "functionName"],
  setup(props, ctx) {
      const handleFuncClick = () => {
          ctx.emit('handleFuncClick')
      }
      const handleBackClick = () => {
          ctx.emit('handleBackClick')

      }
      return { handleFuncClick, handleBackClick }
  },
});
  </script>
  
  <style scoped lang="scss">
.header {
  height: 0.44rem;
  background: #fff;
  line-height: 0.44rem;
  display: flex;
  &_back {
    width: 0.093rem;
    margin-left: 0.184rem;
    color: #b6b6b6;
  }
  &_title {
    flex: 1;
    font-size: 0.16rem;
    color: #333;
    text-align: center;
  }
  &_add {
    width: 0.28rem;
    margin-right: 0.18rem;
    font-size: 0.14rem;
    color: #333;
  }
}
</style>